<template>
  <div class="galleryall">
    <div class="gallery">
      <h1>站酷学习优秀学生Gallery</h1>
      <section class="showcase">
        <div class="choose">
          <button @click="left()">&lt;</button>
          <div class="goodstudent" v-for="(el, index) in username" :key="index">
            <a
              :href="el"
              class="touxiang"
              target="_blank"
              :style="{ backgroundImage: 'url(' + touxiang[index] + ')' }"
            ></a>
          </div>
          <button @click="right()">&gt;</button>
        </div>
        <div class="showwork">
          <a
            class="work"
            v-for="(el2, index2) in sid"
            :key="index2"
            :href="'/article'+'?sid='+sid[index2]"
            target="_blank"
          >
            <div class="userinformation">
              <div
                class="touxiang"
                :style="{ backgroundImage: 'url(' + touxiang[index2] + ')' }"
              ></div>
              <div>
                <div class="username">{{ username[index2] }}</div>
                <div class="description">{{ userdescription[index2] }}</div>
              </div>
            </div>
            <div class="zhuti">{{ zhuti[index2] }}</div>
            <div class="imgziyuan"><img :src="img[index2]" alt="" /></div>
            <h2>{{ title[index2] }}</h2>
          </a>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      sid: ["", "", ""],
      touxiang: ["", "", ""],
      username: ["", "", ""],
      userdescription: ["", "", ""],
      zhuti: ["", "", ""],
      img: ["", "", ""],
      title: ["", "", ""],
      first: 0,
      newusername: [],
      newuserdescription: [],
      newzhuti: [],
      newimg: [],
      newtitle: [],
      newsid: [],
      newtouxiang: [],
    };
  },
  beforeMount() {
    axios
      .get("egg/student")
      .then((response) => {
        let newusername = response.data.map((obj) => obj.username);
        this.username = newusername.slice(this.first, this.first + 3);
        this.newusername = newusername;
        let newuserdescription = response.data.map(
          (obj) => obj.userdescription
        );
        this.userdescription = newuserdescription.slice(
          this.first,
          this.first + 3
        );
        this.newuserdescription = newuserdescription;
        let newzhuti = response.data.map((obj) => obj.zhuti);
        this.zhuti = newzhuti.slice(this.first, this.first + 3);
        this.newzhuti = newzhuti;
        let newimg = response.data.map((obj) => obj.img);
        this.img = newimg.slice(this.first, this.first + 3);
        this.newimg = newimg;
        let newtitle = response.data.map((obj) => obj.title);
        this.title = newtitle.slice(this.first, this.first + 3);
        this.newtitle = newtitle;
        let newsid = response.data.map((obj) => obj.sid);
        this.sid = newsid.slice(this.first, this.first + 3);
        this.newsid = newsid;
        let newtouxiang = response.data.map((obj) => obj.touxiang);
        this.touxiang = newtouxiang.slice(this.first, this.first + 3);
        this.newtouxiang = newtouxiang;
      })
      .catch((error) => {
        console.error(error);
      });
  },
  methods: {
    left() {
      if (this.first - 1 >= 0) {
       console.log(1111);
        this.first = this.first - 1;
        this.username = this.newusername.slice(this.first, this.first + 3);
        this.userdescription = this.newuserdescription.slice(this.first,this.first + 3);
        this.zhuti = this.newzhuti.slice(this.first, this.first + 3);
        this.img = this.newimg.slice(this.first, this.first + 3);
        this.title = this.newtitle.slice(this.first, this.first + 3);
        this.sid = this.newsid.slice(this.first, this.first + 3);
        this.touxiang = this.newtouxiang.slice(this.first, this.first + 3);   
      };   
    },
    right(){
      if(this.first+3<=this.newusername.length-1){
        console.log(2222);
        this.first = this.first+1;
        this.username = this.newusername.slice(this.first, this.first + 3);
        this.userdescription = this.newuserdescription.slice(this.first,this.first + 3);
        this.zhuti = this.newzhuti.slice(this.first, this.first + 3);
        this.img = this.newimg.slice(this.first, this.first + 3);
        this.title = this.newtitle.slice(this.first, this.first + 3);
        this.sid = this.newsid.slice(this.first, this.first + 3);
        this.touxiang = this.newtouxiang.slice(this.first, this.first + 3);
      }
    }
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: inherit;
}
.galleryall {
  background: linear-gradient(
    to bottom,
    rgb(57, 180, 221),
    rgb(109, 225, 175),
    white,
    rgb(230, 230, 230)
  );
}
.gallery {
  padding-top: 32px;
  padding-bottom: 104px;
  margin: 0px auto;
  width: 1200px;
  min-height: calc(100vh - 342px);
  word-break: break-word;
}
h1 {
  transition: all 0.2s ease 0s;
  font-size: 64px;
  display: block;
  line-height: 88px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 60px;
  margin-top: 48px;
}
.showcase {
  position: relative;
  background: transparent;
  text-align: left;
  border-bottom: none;
  border-radius: 0px;
}
.choose {
  width: 400px;
  height: 48px;
  margin: 0px auto;
  display: flex;
}
button {
  margin: 0px 20px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 25px;
  cursor: pointer;
}
.goodstudent {
  display: flex;
}
.touxiang {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: rgb(77, 87, 103);
  margin: 0px 10px;
  background-size: cover;
}
.showwork {
  display: flex;
  transform: translateX(-40px);
}
.work {
  width: 25vw;
  height: 450px;
  margin: 10vh 5vh;
  background-color: white;
  padding: 20px;
  box-sizing: border-box;
}
.userinformation {
  display: flex;
}
a {
  text-decoration: none;
  color: inherit;
}
.username {
  font-size: 20px;
  width: 100%;
}
.description {
  color: rgb(81, 78, 78);
  font-size: 12px;
  margin: 1%;
  width: 100%;
}
.zhuti {
  margin: 10px;
  color: rgb(81, 78, 78);
}
.imgziyuan {
  width: 305px;
  height: 240px;
}
img {
  width: 100%;
  height: 100%;
}
</style>